uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app也称之为全端开发框架

DCloud公司拥有800万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

一套代码编到10个平台，这不是梦想。眼见为实，扫描10个二维码，亲自体验最全面的跨平台效果！

注：

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）：

实际运行效果如下（点击图片可放大）：

安装编辑器HbuilderX 下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。

如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。

安装微信开发者工具 下载地址

点击HbuilderX菜单栏文件>项目>新建

选择uni-app,填写项目名称，项目创建的目录

如手机无法识别，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信开发者工具。

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意： 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

uni-app默认把项目编译到根目录的unpackage目录。

注意：

运行的快捷键是Ctrl+r。 HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行的设备：

如需调试，可参考：uni-app调试

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：

出现如下界面，点击打包即可。

云端打包支持安心打包，保护用户隐私，不会上传代码和证书，通过差量包制作方式实现安心打包。详见：https://ask.dcloud.net.cn/article/37979

云打包也支持cli模式，通过HBuilderX的cli方式（不是uni-app的cli），可以调用命令行打包，方便持续集成。详见：https://hx.dcloud.net.cn/cli/pack

虽然安心打包已经满足需求，但如仍然希望自己使用 xcode 或 Android studio 进行离线打包，则在 HBuilderX 发行菜单里找到本地打包菜单，生成离线打包资源，然后参考离线打包文档操作：https://nativesupport.dcloud.net.cn/AppDocs/README。

在

的可视化界面，进行如下配置（发行在网站根目录可不配置应用基本路径），此时发行网站路径是 www.xxx.com/h5，如：

https://hellouniapp.dcloud.net.cn

在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。

注意

发布为微信小程序：

申请微信小程序AppID，参考：微信教程。

在HBuilderX中顶部菜单依次点击 “发行” => “小程序-微信”，输入小程序名称和appid点击发行即可在

生成微信小程序项目代码。

在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可，详细查看：微信官方教程。

发布为百度小程序：

入驻小程序并申请百度小程序AppID，参考：百度小程序教程。

在HBuilderX中顶部菜单依次点击 “发行” => “小程序-百度”，输入小程序名称和appid点击发行即可在

生成百度小程序项目代码。

在百度小程序开发者工具中，导入生成的百度小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，之后在百度小程序的 管理中心 选择创建的应用点击前往发布，选择对应的版本然后提交审核。

发布为支付宝小程序：

入驻支付宝小程序，参考：支付宝小程序教程。

在HBuilderX中顶部菜单依次点击 “发行” => “小程序-支付宝”，即可在

生成支付宝小程序项目代码。

在支付宝小程序开发者工具中，导入生成的支付宝小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 支付宝小程序后台，选择刚提交的版本点击提交审核，详见：支付宝小程序文档。

发布为字节跳动小程序：

入驻字节跳动小程序，参考：字节跳动小程序教程。

在HBuilderX中顶部菜单依次点击 “发行” => “小程序-字节跳动”，即可在

生成字节跳动小程序项目代码。

在字节跳动小程序开发者工具中，导入生成的字节跳动小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 字节跳动小程序后台，选择刚提交的版本点击提交审核，详见：字节跳动小程序文档。

发布为360小程序：

入驻360小程序，参考：360小程序教程。

在HBuilderX中顶部菜单依次点击 “发行” => “小程序-360”，即可在

生成360小程序项目代码。

在360浏览器中，导入生成的360小程序项目

注意

发布为快应用(webview)：

入驻快应用(webview)，参考：快应用(webview)教程。

在HBuilderX中顶部菜单依次点击 “发行” => “快应用联盟”，即可在

生成快应用(webview)项目代码。

在快应用联盟工具中，导入生成的快应用联盟项目，测试项目代码运行正常后，点击”构建“打包正式版，在快应用联盟后台上传

发布为快应用(webview) - 华为：

入驻华为快应用，参考：华为快应用教程。

在HBuilderX中顶部菜单依次点击 “发行” => “快应用-华为”，即可在

生成华为快应用项目代码。

在华为开发者工具中，导入生成的华为快应用项目，测试项目代码运行正常后，点击”构建“打包正式版，在华为快应用后台上传

发布为QQ小程序： 内容同上，不再重复。

发布的快捷键是Ctrl+u。同样可拉下快速发布菜单并按数字键选择。

全局安装 vue-cli

使用正式版（对应HBuilderX最新正式版）

使用alpha版（对应HBuilderX最新alpha版）

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，如下所示：

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。

更多支持的下载方式，请参考这个插件的说明：download-git-repo

模板项目存放于 Github，由于国内网络环境问题，可能下载失败。针对此问题可以尝试如下措施：

%PLATFORM% 可取值如下：

可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。

快应用有两种开发方式，uni-app均支持：

HBuilderX 2.7.12+ 版支持

HBuilderX 2.7.10+ 版支持

华为快应用文档-小程序转快应用 https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-filestructure

其他：

一个uni-app工程，默认包含如下目录及文件：

Tips

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

注意

js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径，形式如下

注意

css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）

注意

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端css文件不允许引用本地文件（请看注意事项）。

Tips

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

在此注意，当我们给pages设置单独样式是，他会覆盖掉全局样式。例如：

在 pages 文件夹下创建 message 目录，在message目录下右键新建.vue文件,并选择简单模板

但我们会发现，在页面上不会输出我们所编写的的内容，这是因为我们的启动页不是此页面，所以我们要在pages.json 文件中进行配置

Tips：

pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

配置页面的独有样式

style除了能设置 h5 页面的独有样式之外，还可以设置别的，例如以下几个：

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

Tips

属性说明：

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

示例代码：

注意 ：在创建 contact 页面时我发现，我们不能使用微信小程序的方式，直接在配置文件中书写，让此创建，必须要在pages的文件中，手动创建目录

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

list说明：

案例说明：

创建详情页，当我们使用浏览器打开时，可以直接在地址栏中输入地址即可打开，但是我们在小程序里却不能这样，我们要对他进行配置

在全局json文件中进行配置

uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用

uni-app中的组件，就像 HTML 中的 div 、p、span 等标签的作用一样，用于搭建页面的基础结构

在此注意一点，uniapp 和 vue 一样，我们必须有一个根组件，否则就会报错

基础库 1.4.0 开始支持，低版本需做兼容处理。

覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

图片。

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

示例代码：

基础库 1.4.0 开始支持，低版本需做兼容处理。

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

如果使用nvue，则需注意，包裹文字应该使用组件。

属性说明

css:

此时我们会发现，当我们按下子盒子时，我们的父盒子也会变色，这是因为他触发了事件冒泡

这个时候我们只需要给父盒子加上 hover-stop-propagation 就不会出现此效果了

其他属性演示：

在使用 hover-start-time 和hover-stay-time 时注意，人家要求是一数字形式，但是我们不能直接去掉双引号，会报错，我们只需要在属性前面加个 : 即可

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

属性说明

change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：

swiper做左右拖动的长列表的专项问题

Tips

仅可放置在 组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。

基础库 1.0.0 开始支持，低版本需做兼容处理。

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

基础库 1.0.0 开始支持，低版本需做兼容处理。

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

案例代码：

js部分

富文本。

属性说明

注意

如果需要支持 HTML String，则需要自己将 HTML String转化为 nodes 数组，可使用 html-parser 转换。

支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降。

现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。

元素节点：type = node

文本节点：type = text

space 值说明

Tips

text 组件相当于行内标签、在同一行显示

组件内只支持嵌套 ，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。

在app-nvue下，只有才能包裹文本内容。无法在组件包裹文本。

decode 可以解析的有 & ' 。

各个操作系统的空格标准并不一致。

除了文本节点以外的其他节点都无法长按选中。

支持 \n 方式换行。

如果使用 组件编译时会被转换为 。

举例说明：

按钮。

属性说明

size 有效值

type 有效值

form-type 有效值

open-type 有效值

button点击

button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。

多项选择器，内部由多个 checkbox 组成。

属性说明

多选项目。

属性说明

表单，将组件内的用户输入的 提交。

当点击 表单中 formType 为 submit 的 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性说明

输入框。

属性说明

Tips

type 有效值

注意事项

confirm-type 有效值

多行输入框。

属性说明

confirm-type 有效值